<template>
  <view style="width: 100%; min-height: 100vh; background-color: #F8F8F8;">
    <view
        style="width: 100%; height: 154upx; padding-top: 20upx; background-color: white; position: fixed; top: 0; left: 0; z-index: 99;">
      <scroll-view scroll-x class="bg-white nav">
        <view class="flex text-center">
          <view class="cu-item flex-sub" v-for="(item,index) in tab_list" :key="index" @tap="handleChangeTab"
                :data-id="index">
            <view class="flex flex-direction align-center">
              <image :src="item.img" style="width: 100upx; height: 100upx;"></image>
              <view style="font-size: 28upx; color: #333333; font-weight: bold; position: relative">
                {{ item.text }}
                <view v-if="!item.is_read"
                      style="position: absolute; width: 16upx; height: 16upx; background-color: #E52718; top: 8upx;right: -8upx; border-radius: 50%;"></view>
                <view :style="index === tab_cur ? 'display: block' : 'display: none'"
                      style="width: 100%; height: 4upx; background: #E52718; position:absolute; bottom: 0; left: 0; border-radius: 10upx;"></view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="data-box" v-if="show_flag">
      <!--消息-->
      <view v-if="tab_type === '0'" style="width: 100%; padding: 15upx 20upx;">
        <view class="flex justify-between news-box" v-for="(item, index) in new_list" :key="index">
          <view style="width: 4%; margin-top: 12upx;">
            <!--            <view v-if="!all_read" style="width: 14upx; height: 14upx; background-color: #E52718; border-radius: 50%;"></view>-->
          </view>
          <view class="flex flex-direction justify-between" style="width: 96%;">
            <view class="flex justify-between">
              <view style="font-size: 28upx; color: #333333; font-weight: bold;">平台消息</view>
              <view style="font-size: 24upx; color: #999999;">{{ item.created_at }}</view>
            </view>
            <view style="font-size: 26upx; color: #999999;" v-if="item.f_table === 'product' || item.f_table === 'course'">
              {{ item.send_user && item.send_user.nick_name }}(<span style="color: #E52718;"
                @click="handleMakeCall(item)">{{ item.send_user && item.send_user.phonenum }}</span>) 购买了您的
              <span>{{ item.product_name }}</span></view>
              <view v-if="item.f_table === 'settle_apply'"  style="font-size: 26upx; color: #999999;">{{item.content}}</view>
          </view>
        </view>
      </view>
      <!--评论-->
      <view v-if="tab_type === '1'" style="width: 100%; padding: 15upx 20upx;">
        <view class="flex flex-direction"
              style="width: 100%; background-color: white; padding: 20upx; border-radius: 10upx; margin-top: 30upx;"
              v-for="(item, index) in new_list" :key="index">
          <view class="flex" style="width: 100%;">
            <image :src="item.send_user && item.send_user.avatar"
                   style="width: 68upx; height: 68upx; border-radius: 50%; margin-right: 16upx;"></image>
            <view class="flex flex-direction" style="font-size: 22upx;">
              <view style="color: #333333; font-weight: bold;">{{ item.send_user && item.send_user.nick_name }}</view>
              <view style="color: #999999;">{{ item.created_at }}</view>
            </view>
          </view>
          <view style="width: 100%; margin: 22upx 0; font-size: 26upx;">
            <span style="color: #E52718;">评论我：</span>
            <span style="color: #333333;">{{ item.content }}</span>
          </view>
          <view class="flex"
                style="width: 100%; margin-bottom: 22upx; font-size: 26upx; padding-left: 20upx; flex-wrap: wrap;">
            <view v-for="(imgs_arr_item, imgs_arr_index) in item.imgs_arr" :key="imgs_arr_index" class="flex"
                  @click="handlePreviewImgs(imgs_arr_item, item.imgs_arr)">
              <image :src="imgs_arr_item"
                     style="width: 204upx; height: 176upx; border-radius: 10upx; margin: 0 14upx 14upx 0;"
                     mode="aspectFill"></image>
            </view>
          </view>
          <view style="width: 670upx; background-color: #F8F8F8; border-radius: 10upx; padding: 20upx;"
                @click="handleToArticle(item, 'comment')">
            <view class="flex" style="margin-bottom: 20upx; font-size: 26upx;"
                  v-if="item.article && item.article.f_nick_name">
              <view class="zan-comment-box">{{ item.article && item.article.f_nick_name }} <span
                  style="padding-left: 10upx;">评论：</span>{{ item.article && item.article.f_content_html }}
                <image src="/static/icon/detail/tupian@2x.png" class="zan-comment-icon"
                       v-if="item.article && item.article.f_imgs_arr"></image>
              </view>
            </view>
            <view class="flex justify-between">
              <view style="width: 35%;">
                <image :src="item.article && item.article.img" mode="aspectFill"
                       style="width: 180upx; height: 160upx; border-radius: 10upx;"></image>
              </view>
              <view class="flex flex-direction justify-start" style="width: 65%;">
                <view style="font-size: 30upx; color: #333333; font-weight: bold;">
                  {{ item.article && item.article.title }}
                </view>
                <view style="font-size: 20upx; color: #999999; margin: 10upx 0;">
                  {{ item.article && item.article.created_at }}
                </view>
                <view style="font-size: 24upx; color: #999999;">{{ item.article && item.article.intro }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!--点赞-->
      <view v-if="tab_type === '2'" style="width: 100%; padding: 15upx 20upx;">
        <view class="flex flex-direction"
              style="width: 100%; background-color: white; padding: 20upx; border-radius: 10upx; margin-top: 30upx;"
              v-for="(item, index) in new_list" :key="index">
          <view class="flex" style="width: 100%;">
            <image :src="item.send_user && item.send_user.avatar"
                   style="width: 68upx; height: 68upx; border-radius: 50%; margin-right: 16upx;"></image>
            <view class="flex flex-direction" style="font-size: 22upx;">
              <view style="color: #333333; font-weight: bold;">{{ item.send_user && item.send_user.nick_name }}</view>
              <view style="color: #999999;">{{ item.created_at }}</view>
            </view>
          </view>
          <view class="flex align-center" style="width: 100%; margin: 22upx 0; font-size: 26upx; padding-left: 20upx;">
            <span style="color: #333333; margin-right: 10upx;">{{ item.content }}</span>
            <image src="/static/icon/news/Icon_Bo-@2x.png" style="width: 30upx; height: 30upx;"></image>
          </view>
          <view style="width: 670upx; background-color: #F8F8F8; border-radius: 10upx; padding: 20upx;"
                @click="handleToArticle(item.detail,  'zan')">
            <view class="zan-comment-box" v-if="item.f_table === 'evaluate'">{{ item.detail && item.detail.nick_name }}
              <span class="zan-comment">评价：</span>{{ item.detail && item.detail.content_html }}
              <image src="/static/icon/detail/tupian@2x.png" class="zan-comment-icon"
                     v-if="item.detail && item.detail.imgs_arr"></image>
            </view>
            <view class="zan-comment-box" v-if="item.f_table === 'comment'">{{ item.detail && item.detail.nick_name }}
              <span class="zan-comment">评论：</span>{{ item.detail && item.detail.content_html }}
              <image src="/static/icon/detail/tupian@2x.png" class="zan-comment-icon"
                     v-if="item.detail && item.detail.imgs_arr"></image>
            </view>
            <view class="flex justify-between">
              <view style="width: 35%;">
                <image :src="item.detail && item.detail.img"
                       style="width: 180upx; height: 160upx; border-radius: 10upx;"></image>
              </view>
              <view class="flex flex-direction justify-start" style="width: 65%;">
                <view style="font-size: 30upx; color: #333333; font-weight: bold;">
                  {{ item.detail && item.detail.title }}
                </view>
                <view style="font-size: 20upx; color: #999999; margin: 10upx 0;">
                  {{ item.detail && item.detail.created_at }}
                </view>
                <view style="font-size: 24upx; color: #999999;">{{ item.detail && item.detail.intro }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!new_list.length && show_flag" class="justify-center align-center flex-direction"
          style="width: 100%; padding-top: 50%; text-align: center;">
      <image src="/static/image/no_content@2x.png" style="width: 264upx; height: 264upx;"></image>
      <view class="flex justify-center" style="font-size: 24upx; color: #999999;">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center"
            v-if="new_list.length >= 15"
            style="width: 100%; height: 102upx; padding: 0 50upx;">
        <view style="width: 30%; height: 1px; background-color: #F1F1F1;"></view>
        <view style="width: 40%; text-align: center;">
          <view v-if="!bottom_flag" style="color: #CACACA; font-size: 24upx; margin: 0 40upx;">到底了</view>
          <view v-else class="action">
            <view class="cu-load" :class="!is_load?'loading':'over'" style="font-size: 28upx; color: #CACACA;"></view>
          </view>
        </view>
        <view style="width: 30%; height: 2upx; background-color: #F1F1F1;"></view>
      </view>
    </view>
  </view>
</template>

<script>
import {message_getListByCon, message_totalRead, message_messageTab} from 'api/new/new'

export default {
  data() {
    return {
      bottom_flag: true, //触底标识
      is_load: false, //加载标识
      page: 1, //分页
      tab_cur: 0, //tab索引
      scroll_left: 0, //tab栏横向移动距离
      all_read: false, //全部已读
      new_list: [], //消息列表
      show_flag: false,
      tab_list: [], //tab数据
      article_detail: {}, //文章详情
      type: 'platform', //类型
      tab_type: '0', //tab类型 0：全部，1：评论，2：点赞
    }
  },
  methods: {
    //初始化
    pageInit(type, status, page = 1) {
      this.type = type;
      message_getListByCon({type, page}).then(res => {
        console.log(res)
        if (status === 'init') {
          this.new_list = [];
        }
        let temp_data = res.data && res.data.data;
        if (!temp_data.length) {
          this.bottom_flag = false;
        } else {
          plus.runtime.setBadgeNumber(0);
          if (this.tab_type === '2') {
            res.data && res.data.data.forEach(item => {
              item.detail = item[item.f_table]
            })
          }
          this.new_list = this.new_list.concat(res.data && res.data.data)
        }
        this.show_flag = true;
      }).finally(err => {
        this.getNewMenu();
      })
    },
    //获取消息菜单
    getNewMenu() {
      message_messageTab().then(res => {
        this.tab_list = res.data;
      })
    },
    //去个人主页(2021.4.30，没有跳转个人主页这个需求)
    handleToHomePage({send_user_id}){
      this.$uniNavigateTo({
        url: '/pages/my/homePage/homePage',
        query: {
          account_user_id: send_user_id,
        }
      })
    },
    //去文章页
    handleToArticle(item, type) {
      if (type === 'comment') {
        let {article: {id: article_id, type}} = item
        let jump_url_obj = {
          article: '/pages/article/article',
          article_product: '/pages/passBand/projectDetail/projectDetail',
          product: '/pages/passBand/otherDetail/otherDetail',
        }
        this.$uniNavigateTo({
          url: jump_url_obj[type],
          query: {
            article_id,
          }
        })
      } else {
        let {id: article_id, type} = item
        let jump_url_obj = {
          article: '/pages/article/article',
          article_product: '/pages/passBand/projectDetail/projectDetail',
          product: '/pages/passBand/otherDetail/otherDetail',
          course: '/pages/tutorials/articleDetail/articleDetail'
        }
        this.$uniNavigateTo({
          url: jump_url_obj[type],
          query: {
            article_id,
            course_id: article_id,
          }
        })
      }
    },
    //预览图片
    handlePreviewImgs(img, imgs_arr) {
      if (imgs_arr) {
        uni.previewImage({
          urls: imgs_arr,
          current: img
        });
      }
    },
    handleMakeCall({send_user:{phonenum}}){
      uni.makePhoneCall({
        // 手机号
        phoneNumber: phonenum,
        // 成功回调
        success: (res) => {
          console.log(res)
          console.log('调用成功!')
        },
        // 失败回调
        fail: (err) => {
          console.log(err)
        }
      });
    },
    //切换tab栏
    handleChangeTab(e) {
      this.tab_cur = e.currentTarget.dataset.id;
      this.show_flag = false;
      switch (this.tab_cur) {
        case 0:
          this.tab_type = '0';
          this.pageInit('platform', 'init')
          break;
        case 1:
          this.tab_type = '1';
          this.pageInit('comment', 'init')
          break;
        case 2:
          this.tab_type = '2';
          this.pageInit('zan', 'init')
          break;
      }
    },
  },
  onLoad(e) {
    if (e.type) {
      this.type = e.type;
      this.tab_cur = Number(e.tab_cur);
      this.tab_type = e.tab_cur;
    }
    this.pageInit(this.type, 'init');
  },
  //导航栏右侧全部已读按钮
  onNavigationBarButtonTap(e) {
    message_totalRead().then(res => {
      this.all_read = true;
    })
  },
  //上拉加载
  onReachBottom() {
    console.log('上拉加载')
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.pageInit(this.type, 'pull_up', this.page);
    }
  },
  //下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.show_flag = false;
    this.getNewMenu();
    this.pageInit(this.type, 'init', this.page);
    uni.stopPullDownRefresh();
  }
}
</script>

<style lang="less" scoped>
.data-box {
  width: 100%;
  padding-top: 154upx;
}

.zan-comment-icon {
  width: 24upx;
  height: 26upx;
  vertical-align: middle;
  margin-left: 2%;
}

.zan-comment {
  color: #E52718;
  margin: 0 10upx;
}

.zan-comment-box {
  font-size: 26upx;
  color: #333333;
  margin-bottom: 20upx;
  width: 100%;
}

/deep/ .cu-bar {
  height: 130upx;
}

/deep/ .cu-bar.fixed, .nav.fixed {
  box-shadow: none;
}

/deep/ .cu-bar .search-form {
  width: 532upx !important;
  height: 70upx;
  border: 2upx solid #EDEDED;
  background-color: white;
}

.nav .cu-item {
  width: 10upx;
  height: auto;
  line-height: 64upx;
}

.news-box {
  width: 100%;
  background-color: white;
  padding: 20upx;
  border-radius: 10upx;
  margin-top: 30upx;
}
</style>
